<template>

  <div class='container'>
  <el-card  v-loading="loading">
    <el-row>
        <el-col :span="22">
          <el-form :inline="true" :model="fromData">
                <el-form-item label="关键字" >
                  <el-input placeholder="根据文章标题搜索" v-model="fromData.keyword"/>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select  placeholder="请选择" v-model="fromData.options.value">
                      <el-option
                        v-for="item in fromData.options"
                        :key="item.value"
                        :label="item.title"
                        :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button size="small" @click="clearFrom">清除</el-button>
                    <el-button type="primary" size="small" @click="updataForm">搜索</el-button>
                </el-form-item>
           </el-form>
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-edit" type="success" size="small" @click="showRoleDialog = true">新增技巧</el-button>
        </el-col>
    </el-row>
     <!-- 灰色警告 -->
      <el-alert
         :title="`数据一共${total}条`"
         type="info"
         show-icon
         :closable="false"
            />
      <el-table style="padding-top:15px;" :data="list">
         <el-table-column label="序号"  type="index"></el-table-column>
         <el-table-column label="文章标题" prop="title" width="400">
            <template slot-scope="scope">
              <span style="margin-left: 10px;">{{ scope.row.title }}</span>
              <i v-if="scope.row.videoURL"
                class="el-icon-film"
                style="color:#00f;"
                @click="playVideo(scope.row.videoURL)"></i>
            </template>
         </el-table-column>
         <el-table-column label="阅读数" prop="visits"></el-table-column>
         <el-table-column label="录入人" prop="username"></el-table-column>
         <el-table-column label="录入时间" prop="createTime">
           <template slot-scope="scope">
             {{scope.row.createTime | parseTimeByString()}}
           </template>
         </el-table-column>
         <el-table-column label="状态" prop="state" width="80">
           <template slot-scope="scope">
             <!-- <span v-if="scope.row.state">已启用</span>
             <span v-else>已禁用</span> -->
            <span>{{scope.row.state ? '已启用' : '已禁用'}}</span>
           </template>
         </el-table-column>
         <el-table-column label="操作">
             <template slot-scope="scope">
                <el-button type="text" size="small" @click='updateArticles(scope.row.id)'>预览</el-button>
                <el-button type="text" size="small" @click="isDisableds(scope.row)">
                   <span>{{scope.row.state ? '禁用' : '启用'}}</span>
                </el-button>
                <el-button type="text" size="small" :disabled="!scope.row.state" @click="xiuArticle(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="removeArticles(scope.row)"  :disabled="!scope.row.state">删除</el-button>
             </template>
         </el-table-column>
      </el-table>
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
           layout="prev, pager, next, sizes, jumper"
            background
            :page-size="page.pageSize"
            :current-page="page.page"
            :total="total"
            @current-change="changePage"
            :page-sizes="[1, 10, 20, 50]"
            @size-change="handleSizeChange"
            />
        </el-row>
    </el-card>
    <!-- 新增文章弹层 -->
  <ArticlesAdd :showRoleDialog.sync="showRoleDialog" ref="assignRole"/>
  <ArticlesPreview :showUpDialog.sync="showUpDialog" ref="preview"/>
  <div class="video-container">
    <el-dialog :visible="showVideoDialog" modal :show-close="false">
        <div class="hezi" @click="closeVidew">
          <i class="el-icon-close cha" ></i>
        </div>
            <video-player v-if="playerOptions.sources[0].src" class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="true"
                :options="playerOptions">
            </video-player>
    </el-dialog>
   </div>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/articles'
import ArticlesAdd from '../components/articles-add'
import ArticlesPreview from '../components/articles-preview'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  data () {
    return {
      showVideoDialog: false,
      list: [], // 数据列表
      page: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: 1
      },
      total: 0,
      loading: false,
      state: [],
      fromData: {
        keyword: '',
        options: [{
          value: 1,
          title: '启用'
        }, {
          value: 0,
          title: '禁用'
        }]
      },
      showRoleDialog: false, // 添加文章弹层
      showUpDialog: false, // 预览文章弹层
      ArticleId: null,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 类型
          src: '' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  components: {
    ArticlesAdd,
    ArticlesPreview,
    videoPlayer
  },
  created () {
    this.createList()
  },
  methods: {
    // 清除搜索框
    clearFrom () {
      this.fromData = {
        keyword: '',
        options: [{
          value: 1,
          title: '启用'
        }, {
          value: 0,
          title: '禁用'
        }]
      }
      this.createList()
    },
    // 初始化数据
    async createList () {
      this.loading = true
      this.page.keyword = this.fromData.keyword
      this.page.state = this.fromData.options.value
      // console.log(this.fromData.options.value)
      try {
        const { data } = await list(this.page)
        this.state = data.items[0].state
        this.list = data.items
        this.total = data.counts
      } catch (err) {
        this.$message.error('获取数据失败，请稍后再试!')
      }
      this.loading = false
    },
    // 页码
    changePage (newPage) {
      this.page.page = newPage
      this.createList()
    },
    handleSizeChange (val) {
      this.page.pagesize = val
      this.createList()
    },
    // 搜索
    async updataForm () {
      try {
        const { data: { items, counts } } = await list({ keyword: this.fromData.keyword, state: this.fromData.options.value })
        this.list = items
        this.total = counts
        // this.clearFrom()
      } catch (error) {
        this.$message.error('获取数据失败，请稍后再试!')
      }
    },
    // 禁用启用
    async isDisableds (data) {
      try {
        await changeState({ id: data.id, state: data.state ? '0' : '1' })
        this.createList()
      } catch (error) {
      }
    },
    // 删除文章
    removeArticles (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(id)
        this.createList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
      })
    },
    // 预览文章
    updateArticles (id) {
      this.$refs.preview.detail(id)
      this.showUpDialog = true
    },
    // 修改文章
    xiuArticle (id) {
      this.showRoleDialog = true
      this.$refs.assignRole.dingyiid(id)
    },
    // 视频
    playVideo (url) {
      // console.log(url)
      this.playerOptions.sources[0].src = url
      this.showVideoDialog = true
    },
    // 关闭视频弹层
    closeVidew () {
      this.showVideoDialog = false
      setTimeout(() => {
        this.playerOptions.sources[0].src = ''
      }, 500)
    }
  }
}
</script>

<style scoped >
.container {
  padding:15px;
}
::v-deep .video-container .el-dialog .el-dialog__body{
  padding:0 !important;
}
::v-deep .video-container .el-dialog__header {
  display:none;
}
.hezi {
    height:60px;
    width: 60px;
    background: rgba(0,0,0,.4);
    position: absolute;
    transform: translate(-50%);
    top: -80px;
    left: 50%;
    border-radius: 30px;
}
.hezi .cha {
  transform: translate(14px, 0px);
  line-height: 60px;
  font-size: 30px;
}
</style>
